<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <!-- <MyEcharts></MyEcharts> -->
    <div class="viewport">
      <div class="column">
        <div class="overview panel">
          <h3 class="h3">企业实时监控系统</h3>
          <h4 class="h4"><i class="iconfont icon-shizhong"></i>{{ time }}</h4>
        </div>
        <div class="monitor panel">
          <div class="inner">
            <h3>车源量排行榜TOP10</h3>
            <div class="all">
              <StatisticsLine :dcdlist="dcdlist"></StatisticsLine>
            </div>
          </div>
        </div>
        <div class="point panel">
          <div class="inner">
            <h3>各商家7日新增车源量走势</h3>
            <div class="all">
              <HuichengChe :alllist="alllist"></HuichengChe>
            </div>
          </div>
        </div>
        <div class="point panel">
          <div class="inner">
            <h3>各商家7日车源量走势</h3>
            <div class="all">
              <NewDateChe :allnumlist="allnumlist"></NewDateChe>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 标题 -->
        <div class="title panel" style="margin-bottom: 0rem">
          <div class="inner">
            <!-- 数据 -->
            <div class="data">
              <h4>全网今日新增车源量</h4>
            </div>
            <div class="div">
              <div class="left">
                <span> + {{ parseInt((addnum / allnum) * 100) }}%</span>
              </div>
              <div class="right">
                <span><i class="iconfont icon-zhixiangshang"></i> {{ addnum }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <div class="map">
          <h3>懂车帝各省车源量分布</h3>
          <div class="chart">
            <MyEcharts :citylist="citylist"></MyEcharts>
          </div>
        </div>
        <!-- renren -->
        <div class="users panel">
          <div class="inner">
            <h3>人人车车龄分布</h3>
            <div class="chart">
              <VehicleAge :vehiclelist="vehiclelist"></VehicleAge>
            </div>
          </div>
        </div>
        <!-- 估值 -->
        <div class="guzhi panel">
          <div class="inner">
            <h4>乘用车估值</h4>
            <div class="ui">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini">
                <el-form-item prop="region">
                  <el-select v-model="ruleForm.region" placeholder="请选择车型">
                    <el-option value="SUV"></el-option>
                    <el-option value="小轿车"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="year">
                  <el-select v-model="ruleForm.year" placeholder="请选择年份">
                    <el-option v-for="(i, l) in age" :value="i" :key="l"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="city">
                  <area-cascader
                    class="area-cascader-wrap"
                    :level="1"
                    type="text"
                    placeholder="请选择地区"
                    v-model="ruleForm.city"
                    :data="pca"
                  ></area-cascader>
                </el-form-item>
                <el-form-item prop="name">
                  <el-input v-model.number="ruleForm.name" placeholder="万公里"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="mini" @click="resetForm('ruleForm')">乘用车快速估值</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 市场占有率 -->
        <div class="order panel">
          <div class="inner">
            <h3>市场占有率</h3>
            <!-- 数据 -->
            <div class="data">
              <OccupancyPic :allCart="allCart"></OccupancyPic>
            </div>
          </div>
        </div>
        <!-- 日增数量 -->
        <div class="order panel">
          <div class="inner">
            <h3>各商家今日新增车源量</h3>
            <div class="all">
              <AddDaily :todayCart="todayCart"></AddDaily>
            </div>
          </div>
        </div>
        <!-- 每日数量 -->

        <div class="top panel">
          <div class="inner">
            <h3>各商家全部车源量统计</h3>
            <div class="all">
              <DailySales :allCart="allCart"></DailySales>
            </div>
          </div>
        </div>
        <!-- 温度 -->
        <div class="top panel">
          <div class="inner">
            <h3>懂车帝过户次数分布</h3>
            <div class="all">
              <TransferCar :transfer="transfer"></TransferCar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StatisticsLine from './view/StatisticsLine.vue'
import NewDateChe from './view/NewDateChe.vue'
import HuichengChe from './view/HuichengChe.vue'
import MyEcharts from './view/echarts/Echarts.vue'
import OccupancyPic from './view/OccupancyPic.vue'
import AddDaily from './view/AddDaily.vue'
import DailySales from './view/DailySales.vue'
import VehicleAge from './view/VehicleAge.vue'
import TransferCar from './view/TransferCar.vue'
import {
  DCDtodayall,
  DCDtodayadd,
  GuaZitodayall,
  GuaZitodayadd,
  QiChetodayall,
  QiChetodayadd,
  RRtodayall,
  RRtodayadd
} from '@/api/api'
import cityMap from '@/api/cityMap'
import 'vue-area-linkage/dist/index.css'
import { pca, pcaa } from 'area-data'

export default {
  name: 'App',
  data() {
    return {
      age: [
        2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017,
        2018, 2019, 2020, 2021, 2022
      ],
      pca: pca,
      pcaa: pcaa,
      cityMap,
      timer: '',
      time: '',
      center: { lng: 0, lat: 0 },
      zoom: 3,
      todayCart: [],
      allCart: [],
      citylist: [],
      // 中数据
      allnum: 0,
      addnum: 0,
      // 七日新增折线图
      alllist: [],
      // 七日总量折线图
      allnumlist: [],
      vehiclelist: [],
      // 过户次数
      transfer: [],
      // 懂车帝数据
      dcdlist: [],
      ruleForm: {
        region: '',
        year: '',
        city: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入公里数', trigger: 'blur' },
          { type: 'number', message: '请输入正确数据', trigger: 'blur' }
        ],
        year: [{ required: true, message: '请选择', trigger: 'blur' }],
        city: [{ required: true, message: '请选择', trigger: 'blur' }],
        region: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  components: {
    StatisticsLine,
    HuichengChe,
    NewDateChe,
    OccupancyPic,
    MyEcharts,
    AddDaily,
    DailySales,
    VehicleAge,
    TransferCar
  },
  created() {
    this.setInterval()
    this.getAll()
    this.sevendaylist()
    this.sevendayAllList()
    this.vehiclelistage()
  },
  methods: {
    // 估值
    resetForm(a) {
      this.$refs[a].validate(valid => {
        if (valid) {
          console.log(this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 全部数据
    async getAll() {
      // 获取懂车帝今日总数据
      const dongche = await DCDtodayall({ dt: this.getWeek(0) })
      this.dcdlist = dongche.data.data
      // 各省分布
      this.preparationProvince(dongche.data.data)
      // 懂车帝过户次数筛选
      this.transfercar(dongche.data.data)
    },
    // 懂车帝过户次数筛选
    transfercar(data) {
      const list = []
      data.forEach(item => {
        const length = list.findIndex(i => i.name === item.c_3)
        if (length === -1) {
          list.push({ name: item.c_3, value: 1 })
        } else {
          list[length].value++
        }
      })
      list.map(element => (element.name = parseInt(element.name)))
      this.transfer = list
    },
    // 人人车车龄筛选
    async vehiclelistage() {
      // 人人车今日总数据
      const { data } = await RRtodayall({ dt: this.getWeek(0) })
      const list = []
      data.data.forEach(item => {
        let age = parseInt(item.shijian)
        age = isNaN(age) ? '未知' : age
        const length = list.findIndex(i => i.name === age)
        if (length === -1) {
          list.push({ name: age, value: 1 })
        } else {
          list[length].value++
        }
      })
      this.vehiclelist = list
    },
    // 今日新增根据省份筛选
    preparationProvince(data) {
      // 先筛选数据，城市级别的车源量
      const citylist = []
      data.forEach(item => {
        const num = citylist.findIndex(i => i.name === item.c_1)
        if (num === -1) {
          citylist.push({ name: item.c_1, value: 1 })
        } else {
          citylist[num].value++
        }
      })
      // 判断省份
      const res = []
      const array = JSON.parse(JSON.stringify(this.cityMap))
      // 遍历省份对象
      for (const key in array) {
        // 遍历省份中的市
        array[key].forEach(element => {
          // 每个市遍历一遍数据
          citylist.forEach(i => {
            // 数据中存在这个市
            if (element[0].indexOf(i.name) !== -1) {
              // res中有没有城市对应的省份
              const len = res.findIndex(i => i.name === key)
              // 没有对应的省份
              if (len === -1) {
                res.push({ name: key, value: i.value })
              } else {
                // 有对应的省份
                res[len].value = res[len].value + i.value
              }
            }
          })
        })
      }
      this.citylist = res
    },
    // 筛选近7日数据总数量
    async sevendayAllList() {
      const alllist = [
        { name: '懂车帝', value: [] },
        { name: '瓜子二手车', value: [] },
        { name: '汽车街', value: [] },
        { name: '人人车', value: [] }
      ]
      for (let i = -6; i < 1; i++) {
        const week = this.getWeek(i)
        // dongche懂车帝
        const dctodayadd = await DCDtodayall({ dt: week })
        const dc = dctodayadd.data.data.length
        alllist[0].value.push(dc)
        // 瓜子
        const gztodayadd = await GuaZitodayall({ dt: week })
        const gz = gztodayadd.data.data.length
        alllist[1].value.push(gz)
        // 汽车街
        const qctodayadd = await QiChetodayall({ dt: week })
        const qc = qctodayadd.data.data.length
        alllist[2].value.push(qc)
        // 人人车
        const rrtodayadd = await RRtodayall({ dt: week })
        const rr = rrtodayadd.data.data.length
        alllist[3].value.push(rr)
      }
      this.allnumlist = alllist
      this.allCart = alllist.map(item => {
        return { name: item.name, value: item.value[6] }
      })
      // 今日总量
      this.allCart.forEach(item => {
        this.allnum = this.allnum + item.value
      })
    },
    // 筛选近7日全部商家每天新增数量
    async sevendaylist() {
      const alllist = [
        { name: '懂车帝', value: [] },
        { name: '瓜子二手车', value: [] },
        { name: '汽车街', value: [] },
        { name: '人人车', value: [] }
      ]
      for (let i = -6; i < 1; i++) {
        const week = this.getWeek(i)
        // dongche懂车帝
        const dctodayadd = await DCDtodayadd({ dt: week })
        const dc = dctodayadd.data.data.length
        alllist[0].value.push(dc)
        // 瓜子
        const gztodayadd = await GuaZitodayadd({ dt: week })
        const gz = gztodayadd.data.data.length
        alllist[1].value.push(gz)
        // 汽车街
        const qctodayadd = await QiChetodayadd({ dt: week })
        const qc = qctodayadd.data.data.length
        alllist[2].value.push(qc)
        // 人人车
        const rrtodayadd = await RRtodayadd({ dt: week })
        const rr = rrtodayadd.data.data.length
        alllist[3].value.push(rr)
      }
      this.alllist = alllist
      this.todayCart = alllist.map(item => {
        return { name: item.name, value: item.value[6] }
      })
      // 今日新增总量
      this.todayCart.forEach(item => {
        this.addnum = this.addnum + item.value
      })
    },
    // 生成7天日期列表
    getWeek(day) {
      const today = new Date()
      const targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      // 生成新的时间实例
      today.setTime(targetday)
      const tYear = today.getFullYear()
      let tMonth = today.getMonth() + 1 // 月
      let tDate = today.getDate() // 日
      tMonth = tMonth < 10 ? '0' + tMonth : tMonth
      tDate = tDate < 10 ? '0' + tDate : tDate
      return tYear + '-' + tMonth + '-' + tDate
    },

    // 时钟
    setInterval() {
      this.timer = setInterval(this.gettime, 1000)
    },
    gettime() {
      const newtime = new Date()
      const year = newtime.getFullYear()
      const month = newtime.getMonth() + 1
      const date = newtime.getDate()
      const hours = newtime.getHours()
      const minutes = newtime.getMinutes()
      const seconds = newtime.getSeconds()
      const mon = month > 9 ? month : '0' + month
      const da = date > 9 ? date : '0' + date
      const hh = hours > 9 ? hours : '0' + hours
      const mm = minutes > 9 ? minutes : '0' + minutes
      const ss = seconds > 9 ? seconds : '0' + seconds
      this.time = year + '-' + mon + '-' + da + ' ' + hh + ':' + mm + ':' + ss
    }
  }
}
</script>

<style lang="less">
.el-button {
  background-color: #ff6600;
  color: #fff;
}

.el-input input {
  color: #fff;
  text-align: right;
}
.el-form {
  display: flex;
  .el-form-item {
    width: 8rem;
    height: 100%;
  }
}
.el-input__inner {
  background-color: transparent;
}
.h3 {
  padding-bottom: 0.4rem;
  font-size: 1.267rem;
  margin-top: -1.4rem;
}
.h4 {
  i {
    font-size: 1.467rem;
    color: #1296db;
    margin-right: 0.5rem;
  }
}
.map {
  background-color: transparent;
  h3 {
    margin-top: 1rem;
  }
}
.title {
  height: 5.2rem;
  margin-top: 2.65rem;
  h4 {
    font-size: 0.967rem;
    color: #fff;
    margin-bottom: 0.417rem;
  }
  .div {
    display: flex;
    justify-content: space-around;
    color: #fff;
    font-size: 2rem;
  }
  .iconfont {
    font-size: 1.5rem;
    color: red;
  }
}

.area-cascader-wrap {
  background-color: transparent;
  font-size: 12px;
  .area-select {
    width: 8rem;
    color: #fff;
    font-size: 12px;
    height: 27px;
    background-color: transparent !important;
    .area-selected-trigger {
      font-size: 12px;
      padding: 0 0 0 15px;
    }
  }
}
.el-form-item__content {
  width: 100%;
}
.el-col-24 {
  height: 100%;
}
</style>
